<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./login/css/style.css">
    <link rel="shortcut icon" href="./login/img/favicon.ico">
</head>
<body>
    <section>
        <!-- 登录 -->
        <div class="container">
            <div class="user singinBx">
                <div class="imgBx"><img src="./login/img/1.jpg"></div>
                <div class="formBx">
                    <form action="">
                        <h2>登录</h2>
                        <input type="text" name="username" id="username" placeholder="用户名">
                        <input type="password" name="password" id="password" placeholder="密码">
                        <input type="submit" id="loginBtn" value="登录">
                        <p class="signup">没有账号？<a href="#" onclick="topggleForm();">注册</a></p>
                    </form>
                </div>
            </div>
            <!-- 注册 -->
            <div class="user singupBx">
                <div class="formBx">
                    <form action="">
                        <h2>注册</h2>
                        <input type="text" name="username1" id="username1" placeholder="用户名">
                        <input type="password" name="password1" id="password1" placeholder="密码">
                        <input type="password" name="password2" id="password2" placeholder="再次输入密码">
                        <input type="submit" name="register" id="register" value="注册">
                        <p class="signup">已有账号？<a href="#" onclick="topggleForm();">登录</a></p>
                    </form>
                </div>
                <div class="imgBx"><img src="./login/img/2.jpg"></div>
            </div>
        </div>
    </section>
</body>
<script>
    const username1 = document.getElementById('username1');
    const password1 = document.getElementById('password1');
    const password2 = document.getElementById('password2');
    const register = document.getElementById('register');

    register.addEventListener('click',(evt) => {
        evt.preventDefault();
        const  form = new FormData();
        form.append('username1',username1.value);
        form.append('password1',password1.value);
        form.append('password2',password2.value);
        const http = new XMLHttpRequest();
        http.open('POST','http://127.0.0.1:8080/register',true);
        http.onload=() => {
            console.log(http.responseText);
            const resp =JSON.parse(http.responseText);
            if (resp.success){
                alert(resp.message);
            }else {
                alert(resp.message);
            }
        };
        http.send(form);
    });
</script>
<script>
    const username = document.getElementById('username');
    const password = document.getElementById('password');
    const loginBtn = document.getElementById('loginBtn');

    loginBtn.addEventListener('click',(evt) => {
        evt.preventDefault();
        const form = new FormData();
        form.append('username',username.value);
        form.append('password',password.value);
        const http = new XMLHttpRequest();
        http.open('POST','http://127.0.0.1:8080/login',true);
        http.onload=() => {
            console.log(http.responseText);
            const resp =JSON.parse(http.responseText);
            if (resp.success){
                if (resp.role=="admin") {
                    location.href = '/index.html';
                }else {
                    location.href = '/map.html';
                }
            }else {
                alert(resp.message);
            }
        };
        http.send(form);
    });
</script>
<script type="text/javascript">
    function topggleForm(){
        var container = document.querySelector('.container');
        container.classList.toggle('active');
    }
</script>
</html>